{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Python变量</title>
<style>
		html, body {
			height: 100%;
			margin: 0px;
			padding: 0px;
		}

		.div-a{ float:left;width:50%;height:100%;border:1px solid #F00;overflow-y:scroll}
		.div-b{ float:right;width:49%;height:100%;border:0px solid #000}


        div#butt	{
            height:50px;
            border-bottom: 0px solid #c5c5c5;
            background:#fff;
            }

        div#butt input {
            margin:10px 0 0 10px;
            background:blueviolet;
            color:#fff;
            width:150px;
            height:30px;
            font:14px Verdana, Arial, Helvetica, sans-serif;
            }

        form{

            height:45%;
            width:100%;
            margin-left:0px;
			border:0px solid #c5c5c5;
            }
		#CodeArea{
			height:100%;
            width:100%;
            margin-left:0px;
		}
        #TestCode{
            height:85%;
			width:99%;
            overflow:auto;
            border:1px solid #c5c5c5;
            font:14px "Courier New", Courier, monospace;
            }
        #CodeArea h2	{
            margin:10px 0 6px 5px;
            color:brown;
            font-size:14px;
            }

        #result	{
            height:48%;
            width:100%;
			margin-left:0px;
			border:0px solid red;
            }
		#output{
            width:99%;
            height:85%;
            overflow:auto;
            border:1px solid #c5c5c5;
            font:14px "Courier New", Courier, monospace;
            }

        #result h2	{
            margin:10px 0 6px 5px;
            color:brown;
            font-size:14px;
            }

</style>
<script src="{% static "common/jquery-1.8.2.js" %}" type="text/javascript"></script>
</head>
<body>
<div class="div-a">
    <li data-role="list-divider" data-theme="b">Python变量</li>
  <div id="" class="ui-body ui-body-a">
    <p>计算机中变量的概念同我们数学中所学的变量差不多，只是在计算机中变量不仅可以是数字，还可以是其他数据类型。<br/>
变量可以用来储存程序中的一段数据，基于变量的数据类型，解释器会分配指定内存，并决定什么数据可以被存储在内存中。<br/>
<b>变量名必须是大小写英文、数字和_的组合，且不能用数字开头。</b></p><br/>
    <h3>变量赋值</h3>
    <p>
        Python中为变量赋值并不需要声明变量的类型，直接用等号即可为变量赋值：<br/>
>>> score=100<br/>
>>> score<br/>
100<br/>

>>> name='alice'<br/>
>>> name<br/>
'alice'<br/>

>>> price=[12,34,24.1]<br/>
>>> price<br/>
[12, 34, 24.1]<br/>
    </p>
     <p>
         这种变量本身类型不固定的语言被称为动态语言，与之相反的被称为静态语言。静态语言在为变量赋值时必须指定变量类型，如果赋值时，两者不相符，就会报错。<br/>
Python也允许同时为多个变量赋值：<br/>
>>> a=b=c=1<br/>
>>> a<br/>
1<br/>
>>> b<br/>
1<br/>
>>> c<br/>
1<br/>
或者，多个对象指定多个变量：<br/>
>>> a,b,c=1,2,3<br/>
>>> a<br/>
1<br/>
>>> b<br/>
2<br/>
>>> c<br/>
3<br/>
每一个变量名称只能指定一个对象，如果变量同名，后赋值的变量会覆盖原有变量：<br/>
>>> a='Tom'<br/>
>>> a='Jack'<br/>
>>> a<br/>
'Jack'<br/>
注意，赋值语句的=不能等同于数学中的等号：
>>> x=1<br/>
>>> x=x+1<br/>
>>> x<br/>
2<br/>
上例中，x=x+1，如果在数学中是不可能成立的，但在Python中x=x+1中等号右边的x表示的是赋值过的变量x，程序中会先计算出x+1，然后将结果赋值给变量x，重新赋值后变量x的值为2。因此，左右两边的x并不代表同一个值。
     </p>
  </div>

</div>
<div class="div-b">
	<form action="#" method="post" id="tryitform" name="tryitform" onSubmit="validateForm();" target="i" id="form-a">
		<div id="CodeArea">
		<h2>编辑您的代码：</h2>
		<textarea id="TestCode" wrap="logical">
#!/usr/bin/python
# -*- coding: utf-8 -*-
score=100
print score

name='alice'
print name

price=[12,34,24.1]
print price
#-------多变量赋值---------
a=b=c=1
print a
print b
print c
#-------------------------
#-------多变量赋多值-------
d,e,f=1,2,3
print d
print e
print f
#-------------------------

		</textarea>
		</div>
		<input type="hidden" id="code" name="code"  />

	</form>
<div id="butt">
		<input type="button" value="提交代码" onClick="submitTryit()" id="submit">
		</div>
	<div id="result">
		<h2>查看结果:</h2>
		<textarea id="output" wrap="logical"></textarea>
	</div>
</div>
<script type="text/javascript">
	function submitTryit()
	{

	    var t=document.getElementById("TestCode").value;

	    document.getElementById("code").value=t;

	    validateForm();
        $.ajax({
         type:"GET",
         url:"/moon/codeHandler",
         data:{"code":t},
         success:function(ret){
            $('#output').html(ret.result)
            }
        })

	}

	function validateForm()
	{
	var code=document.getElementById("code").value;
	if (code.length>5000)
		{
		document.getElementById("code").value="<h1>Error</h1>";
		}
	}
</script>
</body>
</html>
